<template>
  <div class="app-container">
    <el-row style="margin-bottom:10px;">
      <!-- <el-button type="primary" size="mini" @click="handleAddMenu">新增</el-button> -->
      <el-popover placement="top" width="160" v-model="visible2">
        <p>请选择创建类型。</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="primary" @click="crateMenu">菜单</el-button>
          <el-button type="success" size="mini" @click="createPermission">权限</el-button>
        </div>
        <el-button type="primary" slot="reference" size="mini">新增</el-button>
      </el-popover>
      <!-- <el-button type="danger" size="mini" @click="handleDeleteUser">删除</el-button> -->
    </el-row>

    <el-tree
      :data="data"
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
    ></el-tree>

    <!-- 菜单新增 -->
    <MenuAdd
      @success="onSuccess"
      @failed="onFailed($event)"
      @cancel="onCancel"
      @close="onClose"
      :menuAddDialogVisible="menuAdd.visible"
    ></MenuAdd>

    <!-- 权限新增 -->
    <PermiAdd
      @success="onCreatePermiSuccess"
      @failed="onCreatePermiFailed($event)"
      @cancel="onCreatePermiCancel"
      @close="onCreatePermiClose"
      :permiAddDialogVisible="permiAdd.visible"
    ></PermiAdd>
  </div>
</template>

<script>
import { getMenuTree } from "@/api/menu";
import MenuAdd from "@/views/system/menu/MenuAdd";
import PermiAdd from "@/views/system/menu/PermissionAdd";

export default {
  name: "Menu",
  components: { MenuAdd, PermiAdd },
  data() {
    return {
      data: null,
      listLoading: true,
      defaultProps: {
        children: "children",
        label: "label",
      },
      menuAdd: {
        visible: false,
      },
      permiAdd: {
        visible: false,
      },
      visible2: false,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getMenuTree().then((response) => {
        this.data = response.data;
        this.listLoading = false;
      });
    },
    // handleAddMenu() {
    //   this.menuAdd.visible = true;
    // },
    crateMenu() {
      this.visible2 = false;
      this.menuAdd.visible = true;
    },
    onSuccess() {
      this.menuAdd.visible = false;
      // 添加成功
      this.$message({
        message: "新增菜单成功！",
        type: "success",
      });
      this.fetchData();
    },
    onFailed(msg) {
      this.menuAdd.visible = false;
      this.$message.error("新增菜单失败！" + msg);
    },
    onCancel() {
      this.menuAdd.visible = false;
    },
    onClose() {
      this.menuAdd.visible = false;
    },
    createPermission() {
      this.visible2 = false;
      this.permiAdd.visible = true;
    },
    onCreatePermiSuccess() {
      this.permiAdd.visible = false;
      // 添加成功
      this.$message({
        message: "新增权限成功！",
        type: "success",
      });
      this.fetchData();
    },
    onCreatePermiFailed(msg) {
      this.permiAdd.visible = false;
      this.$message.error("新增权限失败！" + msg);
    },
    onCreatePermiCancel() {
      this.permiAdd.visible = false;
    },
    onCreatePermiClose() {
      this.permiAdd.visible = false;
    },
  },
};
</script>
